<template>
    <div class="class-mg">
        <!-- 创建班级头部 -->
        <div class="exam">
            <el-button @click="showModal = true" style="margin-left: 10px;">创建考试</el-button>
        </div>

        <!-- 班级信息表格 -->
        <div class="table">
            <span>考试管理</span>
            <el-table :data="ExamData" style="width: 100%;border-radius: 10px;">
                <el-table-column prop="title" label="试卷名" width="120"></el-table-column>
                <el-table-column prop="className" label="班级" width="180"></el-table-column>
                <el-table-column prop="fullMark" label="满分" width="120"></el-table-column>
                <el-table-column prop="starTime" label="开始时间" width="220"></el-table-column>
                <el-table-column prop="outTime" label="结束时间" width="220"></el-table-column>
                <el-table-column prop="timeLimit" label="限时" width="180"></el-table-column>

                <el-table-column label="删除" #default="data">
                    <!-- 确认删除 -->
                    <el-popconfirm title="确认删除?" @confirm="onDeleteExam(data.row.examId)">
                        <template #reference>
                            <img src="/src/assets/svg/delete1.svg" class="deleye-img">
                        </template>
                    </el-popconfirm>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <!-- 创建试卷弹窗 -->
    <n-modal v-model:show="showModal">
        <n-card style="width: 1100px" title="创建考试" role="dialog" aria-modal="true">
            <!-- 关闭框 -->
            <template #header-extra>
                <img src="/src/assets/svg/delete.svg" class="deleye-img" @click="showModal = false">
            </template>
            <!-- {{ examData }} -->
            <!-- 分割线 -->
            <el-divider content-position="right">
                <el-icon><star-filled /></el-icon>
            </el-divider>
            <!-- 主要内容 -->
            <div>
                <exam-info :examData="examData"></exam-info>   
            </div>
            <!-- 提交按钮 -->
            <template #footer>
                <div style="display: flex;justify-content: flex-end;">
                    <el-button @click="onSubmit()">提交</el-button>
                </div>
            </template>
        </n-card>
    </n-modal>
</template>

<script setup>
import { computed, onMounted, ref, toRaw } from 'vue';
import { StarFilled } from "@element-plus/icons-vue";
import { Star } from "@element-plus/icons-vue";
import teacherHttp from '@/api/teacherHttp';
import { openInfo } from '@/utils/openInfo';
import useUserStore from '@/stores/useUserStore';
import ExamInfo from '@/components/topicType/ExamInfo.vue';
import timeUtils from '@/utils/timeUtils';

const showModal = ref(false)
const userStore = useUserStore()

//要提交的创建试卷表单
const examData = ref({
    title: "",
    starTime: null,
    outTime: null,
    timeLimit: null,
    topicArray: [],//[]
    teacherId: userStore.userInfo.userId,
    classId: [],//[]
    fullMark: 0,
})

onMounted(() => {
    // 初始化试卷列表
    getExamList()
})





//提交创建试卷
function onSubmit() {
    const FormData = toRaw(examData.value)
    //表单验证有问题
    if (FormData.title == "" || FormData.starTime == null || FormData.outTime == null || FormData.timeLimit == null || FormData.fullMark == 0 || FormData.classId == []) {
        openInfo("表单填写不完整")
    } else {
        console.log("提交表单", FormData);
        //转化时间格式
        FormData.starTime = timeUtils.timestampToDate(FormData.starTime)
        FormData.outTime = timeUtils.timestampToDate(FormData.outTime)
        FormData.timeLimit = timeUtils.timestampToDate(FormData.timeLimit, 'ms')
        //发送请求
        teacherHttp.createExam(FormData).then((res) => {
            if (res.code == 200) {
                openInfo(res.msg)
                 examData.value = ({title: "",starTime: null,outTime: null,timeLimit: null,topicArray: [],teacherId: userStore.userInfo.userId,classId: [],fullMark: 0,})
                showModal.value = false
                getExamList()
            }
        })
    }
}

//试卷列表数据
const ExamData = ref([])
//获取初始考试列表数据
function getExamList(){
    teacherHttp.getExamList(userStore.userInfo.userId).then((res)=>{
        console.log("考试数据",res.data);
        ExamData.value = res.data
        //把展示到列表的数据进行一定处理
        for (let i = 0; i < ExamData.value.length; i++) {
            ExamData.value[i].timeLimit = timeUtils.HMS(ExamData.value[i].timeLimit)
            //replace("T", " ")
            ExamData.value[i].starTime= ExamData.value[i].starTime.replace("T", " ")
            ExamData.value[i].outTime= ExamData.value[i].outTime.replace("T", " ")
        }
        
    })
}

//点击删除该考试
function onDeleteExam(examId){
    teacherHttp.deleteExam(examId).then((res)=>{
        if(res.code == 200){
            openInfo(res.msg)
            //更新数据
            getExamList()
        }
    })
}

</script>

<style scoped>
/* 最大的盒子 */
.class-mg {
    background-color: rgb(182, 174, 174, 0.1);
    display: flex;
    flex-direction: column;
    height: 900px;
    border-radius: 10px;
}

/* 创建班级和发送通知 */
.exam {
    margin: 10px;
    height: 50px;
    background-color: rgb(182, 174, 174, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
}

/* 关闭弹窗键 */
.deleye-img {
    transition: transform 0.3s ease;
    cursor: pointer;
    margin-left: 10px;
}

.deleye-img:hover {
    transform: scale(1.2);
}



/*表格*/
.table {
    border-radius: 10px;
    padding: 20px;

}
</style>